<script>
    import "https://unpkg.com/@wangeditor/editor@5.1.23/dist/index.js"
    regComp('km-playgroup', class extends KMin {
        css() {
            return `<?php echo <<<CSS
    .btn {
        margin-left: 10px;
    }

    .content {
        background-color: #fff;
        box-sizing: border-box;
    }

    iframe {
        width: 100%;
        height: 100%;
        padding: 10px;
        box-sizing: border-box;
        background-color: #f5f5f5;
        border: none;
    }

    .editor-text-area {
        width: 100%;
        height: auto;
    }

    .editor-text-area [data-slate-editor]>*:not(pre) {
        display: none !important;
    }

    .w-e-bar {
        display: none
    }
CSS; ?>`;
        }
        render() {
            return `<?php echo <<<HTML
    <link rel="stylesheet" href="https://unpkg.com/@wangeditor/editor@5.1.23/dist/css/style.css">
    <div class="content">
        <div class="view">
            <iframe frameborder="0"></iframe>
        </div>
        <div>
            <button class="btn" @click="onSubmit">运行</button>
            <div id="editor-text-area" class="editor-text-area"></div>
        </div>
    </div>
HTML; ?>`;
        }

        constructor() {
            super();
            this.content =
                `&lt;head&gt;
  &lt;script type="module" src="\/kmin.js\/src\/kmin.js"&gt;&lt;\/script&gt;
&lt;\/head&gt;
&lt;body&gt;
&lt;\/body&gt;`
        }

        onSubmit() {
            const view = this.shadowRoot.querySelector('.view')
            view.innerHTML = ''
            const iframe = document.createElement('iframe')
            view.appendChild(iframe)
            // 替换iframe的内容
            iframe.contentDocument?.write(this.content)
            iframe.contentDocument?.close()
        }

        connectedCallback() {
            super.connectedCallback();
            if (typeof this.editor != "undefined") {
                return;
            }
            // 创建编辑器
            this.editor = wangEditor.createEditor({
                selector: this.shadowRoot.querySelector('#editor-text-area'),
                config: {
                    onChange: (editor) => {
                        const html = editor.getHtml()
                        const tempDiv = document.createElement('div');
                        tempDiv.innerHTML = html;
                        const pre = tempDiv.querySelector('pre')
                        if (!pre) {
                            editor.setHtml(`<pre><code class="language-javascript"></code></pre>`);
                        }
                        this.content = editor.getText()
                    },
                    // 扩展配置
                    extendConfig: {
                        // 只允许pre和code标签
                        allowElems: ['pre', 'code'],
                        // 禁止样式
                        styleWithCSS: false,
                        // 粘贴时过滤样式
                        pasteFilterStyle: true,
                        // 忽略粘贴的图片
                        pasteIgnoreImg: true,
                        // 处理粘贴的文本：转换为代码块
                        pasteTextHandle: content => {
                            // 将粘贴的文本内容转换为代码块格式
                            return `<pre><code class="language-javascript">${this.content}</code></pre>`;
                        }
                    },
                },
                html: `<pre><code class="language-javascript">${this.content}</code></pre>`,
                mode: 'default' // 或者 'simple' ，下文有解释
            })
        }

        disconnectedCallback() {
            if (this.editor) {
                this.editor.destroy()
            }
        }
    })
</script>